<!--  -->
<template>
  <div class="four">
    <div class="wrapper">
      <div class="content">
        <el-carousel :interval="3000" type="card" height="250px">
          <el-carousel-item>
            <div @click="click1">
              <img src="~assets/img/show/15.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click2">
              <img src="~assets/img/show/16.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click3">
              <img src="~assets/img/show/17.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click4">
              <img src="~assets/img/show/18.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click5">
              <img src="~assets/img/show/19.jpg" alt="" />
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="totitle">知识卡片</div>

        <div class="container">
          <div class="item">
            <div class="title">“建党节”由来</div>
            <div class="img">
              <img src="~assets/img/four/01.jpg" alt="" />
            </div>
            <div class="info">
              建党节，即中国共产党建党日。中国共产党于1921年7月23日成立后，在反动军阀政府的残暴统治之下，只能处于秘密状态，没有公开进行活动的环境。在大革命时期，党忙于国共合作、开展工农运动和支援北伐战争，没有条件对党的诞生进行纪念。把7月1日作为中国共产党的诞辰纪念日，是毛泽东同志于1938年5月提出来的。当时，毛泽东在《论持久战》一文中提出：“今年七月一日，是中国共产党建立的十七周年纪念日”。这是中央领导同志第一次明确提出“七一”是党的诞生纪念日。
              1941年，中共中央确定将7月1日作为中国共产党建党日。此后每年的7月1日，全党都要热烈庆祝党的诞生纪念日。
            </div>
          </div>
          <div class="item">
            <div class="title">红船精神</div>
            <div class="img">
              <img src="~assets/img/four/02.jpg" alt="" />
            </div>
            <div class="info">
              7月30日晚，代表们正在开会时，一名陌生的中年男子突然闯入会场，环视一周后又匆忙离去。共产国际代表马林建议马上中止会议。大部分代表迅速转移。十几分钟后，法租界巡捕包围和搜查会场。由于活动已受到监视，会议无法继续在上海举行。代表们分批转移到浙江嘉兴南湖，在一艘游船上召开了最后一天的会议，这条游船因而获得了一个永载中国革命史册的名字——红船。
              红船，见证了中国历史上开天辟地的大事变，成为中国革命源头的象征。
              2005年6月，时任浙江省委书记的习近平同志首次提出“红船精神”，并将其概括为开天辟地、敢为人先的首创精神，坚定理想、百折不挠的奋斗精神，立党为公、忠诚为民的奉献精神，是中国革命精神之源。
            </div>
          </div>
          <div class="item">
            <div class="title">中国第一红街</div>
            <div class="img">
              <img src="~assets/img/four/03.jpg" alt="" />
            </div>
            <div class="info">
              “中国第一红街”位于武汉市武昌区司门口，浩浩长江的南岸，巍巍大桥的脚下，从中华路到红巷不足千米的距离，依次分布着武昌中央农民运动讲习所、毛泽东旧居、陈潭秋烈士纪念馆、中共五大会址。青砖灰瓦，石板铺地，街旁大树参天，竹影摇曳，看上去只是一条武昌老城区的寻常巷陌，却与共和国历史紧密相连，成为多少爱国人士心中的圣地，前来观看者络绎不绝。红色文化基因代代相传，根源于人们心中对美好生活的不倦向往，根源于人们血脉中澎湃不息的革命豪情。
            </div>
          </div>
          <div class="item">
            <div class="title">武昌中央农民运动讲习所</div>
            <div class="img">
              <img src="~assets/img/four/04.jpg" alt="" />
            </div>
            <div class="info">
              武昌中央农民运动讲习所是第一次国共合作时期，毛泽东倡议创办的一所培养全国农民运动干部的学校。1958年复原建成，大门上的“毛泽东同志主办的中央农民运动讲习所旧址”匾额，由周恩来总理亲笔题写。农讲所“是要训练一班能领导农村革命的人才出来，对于农民问题有深切的认识，详细的研究，正确解决的方法，更锻炼着农运的决心，几个月后，都跑到乡间，号召广大的农民群众起来，实行农村革命，推翻封建势力。中央农民运动讲习所可以说是农民革命大本营。”
            </div>
          </div>
          <div class="item">
            <div class="title">毛泽东同志旧居</div>
            <div class="img">
              <img src="~assets/img/four/05.jpg" alt="" />
            </div>
            <div class="info">
              毛泽东同志旧居是毛泽东1927年上半年在武汉从事革命活动时居住的地方，于1967年按原貌重建并对外开放，收藏着一只生锈的铁箱和一台漆面斑驳的座钟等珍贵历史文物。毛泽东同志旧居见证了毛泽东写作《湖南农民运动考察报告》、主持武昌中央农民运动讲习所、参加中共五大等重要历史活动，也见证了毛泽东与夫人杨开慧，儿子毛岸英、毛岸青和毛岸龙的最后一段团聚一起的温馨生活。
            </div>
          </div>
          <div class="item">
            <div class="title">中共五大会址</div>
            <div class="img">
              <img src="~assets/img/four/06.jpg" alt="" />
            </div>
            <div class="info">
              中共五大会址占地面积7900平方米，7幢砖木结构的建筑呈“回”字型排列，原为国立武昌高等师范学校附属小学，见证了毛泽东、陈潭秋的早期革命活动。1927年蒋介石发动四一二反革命政变，向共产党人和革命群众举起屠刀，大革命陷入低谷。面对错综复杂、尖锐激烈的国内外政治形势，中国共产党人需要有清醒的认识，采取果断的行动，才能挽救革命。中共五大就是在这种背景下召开的，出席大会的代表有陈独秀、瞿秋白、蔡和森、李维汉、毛泽东、陈潭秋、李立三等82人，代表当时全国五万七千多名党员。共产国际也派代表参加了大会。
            </div>
          </div>
        </div>
                <div class="back-home" @click="backHome">
          <img src="~assets/img/backtop/backhome1.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "One",
  components: {},
  data() {
    return {};
  },
    methods: {
    click1() {
      this.$router.push("/one").catch((err) => {
        err;
      });
    },
    click2() {
      this.$router.push("/two");
    },
    click3() {
      this.$router.push("/three");
    },
    click4() {
      this.$router.push("/four");
    },
    click5() {
      this.$router.push("/five");
    },
        backHome() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.four {
  width: 100vw;
  height: 100vh;
  background: pink;
  overflow: hidden;
  background: url("~assets/img/show/18.jpg");
  /* background: url("~assets/img/one/04.jpg"); */
  background-size: cover;
}
.back-home{
  width: 60px;
  height: 60px;
  position: fixed;
  top: 40px;
  left: 160px;
  /* background:#AE454A ; */
  background: #fff;
  border-radius: 50%;
  opacity: .8;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.back-home img{
  margin-top: 7px;
width: 90%;
transition: .5s;
}
.back-home:hover img{
  transform: scale(1.2);
}
.el-carousel__item img {
  width: 100%;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
  background: #eee;
  height: 100%;
  overflow-y: scroll;
  /* opacity: 0.9; */
}
.wrapper::-webkit-scrollbar {
  display: none;
}
.totitle {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  /* text-indent: 2em; */
  color: #333;
}
.content {
  overflow: hidden;
  width: 100%;
}
.container {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  background: rgba(158, 12, 33, 1) 62.6%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 10px;
  padding-bottom: 50px;
}
.container .item {
  width: 330px;
  height: 550px;
  background: #fff;
  margin-top: 70px;
  transform-origin: center;
  transform: perspective(800px) rotateY(20deg);
  transition: 0.5s;
  opacity: 0.8;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}
.container .item:nth-child(2n) {
  transform: perspective(800px) rotateY(-20deg);
}
.container .item:hover {
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}
.container .item .title {
  height: 50px;
  line-height: 50px;
  background: #de1d5e;
  text-align: center;
  font-weight: 600;
}
.container .item .img {
  width: 100%;
  height: 250px;
  margin-bottom: 20px;
}
.container .item .img img {
  width: 100%;
  height: 100%;
}
.container .item .info {
  border-top: 1px solid #ddd;
  text-indent: 2em;
  text-align: justify;
  background: #fff;
  padding: 20px 20px;
  font-size: 13px;
}
</style>